<html><head><meta charset="utf-8"><title>03 Webpack 开发环境搭建-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 1-3 03 Webpack 开发环境搭建
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                03 Webpack 开发环境搭建
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-21 09:49:01
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img2.mukewang.com/5cd962eb000160d406400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">从不浪费时间的人，没有工夫抱怨时间不够。<p class="author">——杰弗逊</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本文将包括安装 Node、NPM、WebPack 开发环境，我使用的开发 IDE 是 <a href="https://code.visualstudio.com/">VScode</a>。因为 Webpack 实际是用 Node.js 写的，所以首先来介绍下 Node.js 的安装。已经准备好环境的，或者之前有过 Node.js 和 NPM 使用经验的可以直接跳过本小节内容。直接跳到下一小节的 Webpack 入门内容。</p>
</div><div class="cl-preview-section"><h2 id="安装-node.js" style="font-size: 30px;">安装 Node.js</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先进入 <a href="https://nodejs.org/zh-cn/">Node.js 的官网</a>，选择对应系统的<a href="https://nodejs.org/zh-cn/download/">下载包</a>进行下载安装，对于 windows 用户，直接下载安装包安装即可，如果是 Macos 用户，推荐使用 <a href="https://brew.sh/index_zh-cn">brew</a> 进行安装。接下来分别介绍下 Node.js 的版本管理和包管理工具。</p>
</div><div class="cl-preview-section"><h3 id="node.js-版本管理">Node.js 版本管理</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Node.js 版本众多，包括稳定版和开发版，可能不同的项目需要的 Node.js 版本不同，这里我推荐大家安装 8.9 以上版本，对于已经安装了 Node.js 的朋友，可以使用 <a href="https://github.com/creationix/nvm">nvm</a>（<a href="https://github.com/coreybutler/nvm-windows">windows 版本</a>）对 Node.js 进行进行版本管理，（另外阿里有个 <a href="https://github.com/aliyun-node/tnvm">tnvm</a> ，也是管理 Node.js 版本的，增加了 alinode 版本系列的 Node.js）。</p>
</div><div class="cl-preview-section"><h3 id="node.js-包管理工具">Node.js 包管理工具</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Node.js 之所以这么流行，离不开庞大的社区建设，这里第一功劳就是 NPM 团队的贡献，使用 Node.js 写的代码，可以打包发布到 JavaScript 包管理平台 <a href="https://www.npmjs.com/">npmjs.com</a>（这个存放包的地方一般也被称为仓库）上，当我们项目需要使用某个包（模块）时，可以直接使用包管理工具来安装（下载）对应的包，我们也可以免费注册一个账号，发布自己的公共包和私有包供其他人使用。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">NPM 是围绕着<a href="https://semver.org/lang/zh-CN/">语义版本控制（semver）</a>思想而设计的，我们在软件版本中碰见的：rc、<code>1.x.x</code>、<code>alpha</code>、<code>beta</code>等名词都可以在 <a href="http://semver.org">semver.org</a> 得到解释介绍，简单来说规范是<code>主版本号.次版本号.修订号</code>（<code>MAJOR.MINOR.PATCH</code>）：</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">1.主版本号：当你做了不兼容的 API 修改；<br>
2.次版本号：当你做了向下兼容的功能性新增；<br>
3.修订号：当你做了向下兼容的问题修正；</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">NPM 中使用了一个命名为<code>package.json</code>的文件作为一个 NPM 包的描述文件，<code>package.json</code>包含了包的基本信息（名称、版本号、描述、作者等）和依赖关系，例如：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"name"</span><span class="token punctuation">:</span> <span class="token string">"demo"</span><span class="token punctuation">,</span>
    <span class="token string">"version"</span><span class="token punctuation">:</span> <span class="token string">"1.0.0"</span><span class="token punctuation">,</span>
    <span class="token string">"dependencies"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"webpack"</span><span class="token punctuation">:</span> <span class="token string">"^4.29.6"</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">除了 <code>version</code> 符合 semver 规范以外，再来看下其他两项：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><code>name</code>：上面的代码就是表明了这个项目为<code>demo</code>，这样如果我们将来发布到 <a href="https://www.npmjs.com/">npmjs.com</a> 会以这个来命名，除了这种方式的名称，还有一种命名的方式是<code>@scope/name</code>的方式，是<code>作用域包</code>，例如我们用来转化 ES6 语法的<code>@babel/core</code>就是<code>@babel</code>的作用域，详细介绍可以查看 <a href="https://www.npmjs.cn/misc/scope/">package.json 的文档</a></li>
<li style="font-size: 20px; line-height: 38px;"><code>dependencies</code>：是<code>demo</code>这个项目的依赖，就是 demo 这个包内离开<code>webpack</code>这个包就不能使用了，对应的还有<code>devdependencies</code>，开发以来，一般需要二次开发 demo 的时候需要安装的包，实际项目中，<code>webpack</code>是构建工具，代码不会直接用 webpack 的 API，而只在开发和打包的时候采用，所以正确做法是放在<code>devdependencies</code>中。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">注意到<code>dependencies</code> 中<code>webpack</code> 的后面版本号前面加了<code>^</code>，意思是主版本是<code>4</code>的最新版本，每次执行安装命令的时候，会更新符合这个规则的最新包，可以在<a href="https://www.npmjs.cn/misc/semver/#ranges">npm semver range 部分</a>看到更详细的介绍。</p>
</div><div class="cl-preview-section"><h3 id="npm-的常用命令">NPM 的常用命令</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面介绍下 NPM 的常用命令：安装、删除、初始化、配置。</p>
</div><div class="cl-preview-section"><h4 id="安装和删除" style="font-size: 26px;"><strong>安装和删除</strong></h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">安装某个 NPM 包，使用命令<code>npm install packageName</code>，简写<code>npm i packageName</code>，如果执行命令的目录下有<code>package.json</code>则可以直接用<code>npm install</code>安装<code>package.json</code>中的所有依赖。如果我们要安装某个版本的包，则可以使用命令<code>npm i packageName@x.x.x</code>格式。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果我们安装依赖包并且将这个依赖写入<code>package.json</code>则可以使用命令<code>npm i packageName --save</code>（简写<code>npm i packageName -S</code>），如果希望写到<code>package.json</code>开发依赖中（<code>devdependencies</code>）则使用命令<code>npm i packageName --save-dev</code>（简写<code>npm i packageName -D</code>）</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">删除某个 NPM 包，则使用<code>npm uninstall 包名</code>。</p>
</div><div class="cl-preview-section"><h4 id="本地模式和全局模式" style="font-size: 26px;">本地模式和全局模式</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">npm 的包安装，分为本地模式和全局模式，默认是本地模式，即在执行<code>npm install</code>命令的当前目录创建<code>node_modules</code>，然后下载安装包及其依赖到<code>node_modules</code>目录。全局模式是指安装到全局路径的方式。在 Node.js 的 require 依赖之时，会优先查找自己当前文件的<code>node_modules</code>，如果没有，则循环遍历上层的<code>node_modules</code>，如果便历到根目录还找不到，则会使用全局模式安装的模块，另外全局模式安装的包可以指定全局命令，只需要在<code>package.json</code>增加<code>bin</code>字段并且指向包内对应的文件即可。全局安装一个包，使用命令<code>npm install --global</code>，<code>--global</code>可以简写为<code>-g</code>。</p>
</div><div class="cl-preview-section"><h4 id="初始化一个-npm-项目" style="font-size: 26px;">初始化一个 NPM 项目</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">npm init 用来初始化生成一个新的 package.json 文件。输入<code>npm init</code>并且根据对应的提示回答问题，会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。<br>
如果使用了 <code>-f</code>（代表<code>force</code>）、<code>-y</code>（代表<code>yes</code>），则跳过提问阶段，直接生成一个新的 <code>package.json</code> 文件。</p>
</div><div class="cl-preview-section"><h4 id="设置-npm-镜像" style="font-size: 26px;">设置 NPM 镜像</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">由于 NPM 网站经常不稳定，所以国内有很多镜像可以使用，<a href="https://npm.taobao.org/">淘宝 NPM 镜像</a>是国内最大的一家 NPM 镜像网站，还有<code>cnpm</code>包可以替换官方 NPM 来使用，使用<code>cnpm</code>直接使用淘宝镜像安装 NPM 包。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">单次使用镜像方法：</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">npm [命令] --registry=https://registry.npm.taobao.org
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">设置默认 npm 使用淘宝镜像方法：</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">npm config set registry https://registry.npm.taobao.org
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">使用下面的命令可以安装 cnpm 包，之后直接像使用 npm 一样使用 cnpm 即可，不需要添加<code>register</code></p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">npm install -g cnpm --registry=https://registry.npm.taobao.org
</code></pre>
</div><div class="cl-preview-section"><h4 id="npm-其他常用命令" style="font-size: 26px;">NPM 其他常用命令</h4>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">npm set：设置环境变量，例如：<code>npm set init-author-name 'Your name'</code>，初始化的时候会使用默认环境变量；</li>
<li style="font-size: 20px; line-height: 38px;">npm info：查看某个包的信息，例如：<code>npm info lodash</code>；</li>
<li style="font-size: 20px; line-height: 38px;">npm search：查找 npm 仓库，后面可以跟字符串或者正则表达式，例如：<code>npm search webpack</code>；</li>
<li style="font-size: 20px; line-height: 38px;">npm list：树形的展现当前项目安装的所有模块，以及对应的依赖，例如：<code>npm list --global</code>查看全局安装的模块。</li>
</ul>
</div><div class="cl-preview-section"><h3 id="npm-scripts">NPM Scripts</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">NPM 不仅可以用于模块管理，还可以用于执行脚本。<code>package.json</code> 文件中可以添加 <code>scripts</code> 字段，用于指定脚本命令，供 NPM 直接调用。例如：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token comment">// package.json</span>
<span class="token punctuation">{</span>
    <span class="token string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"build"</span><span class="token punctuation">:</span> <span class="token string">"webpack"</span><span class="token punctuation">,</span>
        <span class="token string">"start"</span><span class="token punctuation">:</span> <span class="token string">"node src/scripts/dev.js"</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在<code>package.json</code>添加上面字段之后，可以直接使用<code>npm run build</code>和<code>npm run start</code>命令了，实际上：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><code>npm run build</code>：相当于执行了当前项目中目录下的<code>webpack</code>命令；</li>
<li style="font-size: 20px; line-height: 38px;"><code>npm run start</code>：相当于执行了<code>node src/scripts/dev.js</code>。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">另外<code>npm run start</code>还可以简写成<code>npm start</code>。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：除了 npm 外，还有一些包管理工具，主要是针对 npm 的下载速度慢、<code>node_modules</code> 混乱等缺点设计的，例如<a href="https://yarnpkg.com/">yarn</a>和 <a href="https://pnpm.js.org/">pnpm</a>。</p>
</blockquote>
</div><div class="cl-preview-section"><h2 id="安装-webpack-cli" style="font-size: 30px;">安装 Webpack-cli</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack/webpack-cli">Webpack-cli</a>是 Webpack 的 CLI （Command-line interface）工具，如果在项目中，我们可以使用下面的方式安装：</p>
</div><div class="cl-preview-section"><pre><code>npm install webpack-cli --save-dev
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果想全局使用<code>webpack</code>的命令，可以使用<code>npm install -g webpack-cli</code>安装。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：这里建议在项目中安装 webpack-cli 并且使用 <code>--save-dev</code> 的配置将 webpack-cli 放到开发依赖中。</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">到此，我们就准备好 Webpack 的命令行开发环境了，下面小节开始介绍 webpack-cli 的零配置打包。</p>
</div><div class="cl-preview-section"><div class="summary"><h5 class="centertitle" style="font-size: 20px; line-height: 38px;">小结 </h5></div><!--title:&#23567;&#32467; -->
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节主要介绍了 Webpack 的开发环境搭建，从 Node.js 安装、NPM 的使用最基础开始讲解，指导学生手把手的上手 Node.js 开发环境。并且介绍了 NPM 相关的命令使用和 NPM Scripts 概念，NPM Scripts 在用 NPM 搭建项目开发命令时被广泛应用，接下来我们开始体验 Webpack-cli 的零配置打包吧！</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">本小节 Webpack 相关面试题：</p>
<p style="font-size: 20px; line-height: 38px;">1.什么是 NPM Scripts？NPM Scripts 可以用来做什么？<br>
2.NPM 的常用命令有哪些？</p>
</blockquote>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/260">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    02 什么是 Webpack
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/262">
                                                    <div class="next r clearfix">
                                <p>
                                    04 使用 webpack-cli 体验零配置打包
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>